import React, { useState } from 'react'
import axios from "axios"

export default function Header({ setResult }) {
  const [search, setSearch] = useState('')

  const searchHandle = (e) => {
    setSearch(e.target.value)
  }

  const RequestHandle = async () => {
    setResult({ isInit: false, isSearch: true, data: [] })
    const requestResult = await axios.get(" https://api.github.com/search/users?q=" + search)
    setResult({ isInit: false, isSearch: false, data: requestResult.data.items })
  }


  return (
    <section className="jumbotron">
      <h3 className="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" value={search} onChange={searchHandle} placeholder="enter the name you search" />&nbsp;
        <button onClick={RequestHandle}>Search</button>
      </div>
    </section>
  )
}
